<template>
     <view>
        <!-- 不在范围内 -->
		
		<view v-if="clockStatus==1&!is">
			<!-- <map style="width: 100%; height: 600rpx;"  :latitude="latitude" :longitude="longitude" :markers="covers" :circles='circles'>
			</map> -->
			<view class="cardBottom"> 
			     <view class="content"> 
			     	  <view :class="['circle', moduleColor]" @click="clickSign">
						  <view>
						      <view>{{moduleTitle}}</view>
						      <view>{{time}}</view>
						      <!-- <view class="desc" v-if="am">请在{{companyInfo.upTime}}前打卡</view>
						      <view class="desc" v-else>请在{{companyInfo.downTime}}后打卡</view> -->
						  </view>
					  </view>
					  <view class="warning"><van-icon name="warning" color="#ff0000"/> 您所在的位置不在打卡范围内</view>
					<view class="time">上班{{companyInfo.upTime}}——下班{{companyInfo.downTime}}<van-icon name="arrow" /></view>
			     </view>
			</view>
		</view>
        <!-- 正常打卡 -->
        <view class="dkn" v-if="clockStatus==1&is">
            <view>
                <view>
					<image
					    src="../../static/images/address_icon.png"
					    mode="scaleToFill"
					    class="address_icon"
					/>
					<view class="dk_tj">
					    您已在打卡范围内
					</view>
					<view class="address">{{companyInfo.yardName}}</view>
				</view>
				<view>
					
				</view>
                <view :class="['circle', moduleColor]" @click="clickSign">
                    
                    <view>
                        <view>{{moduleTitle}}</view>
                        <view>{{time}}</view>
                       <!-- <view class="desc" v-if="am">请在{{companyInfo.upTime}}前打卡</view>
                        <view class="desc" v-else>请在{{companyInfo.downTime}}后打卡</view> -->
                    </view>
                </view>
                <view class="time">上班{{companyInfo.upTime}}——下班{{companyInfo.downTime}}<van-icon name="arrow" /></view>
            </view>
             
        </view>
        <!-- 打卡成功 -->
        <view class="dkn"  v-if="clockStatus==2">
           <view>
              <image
                :src="dakaResult.status=='ABNORMAL'?'../../static/images/yc_dk.png':'../../static/images/success_dk.png'"
                mode="scaleToFill"
                class="success_dk"
              />
              <view class="work_status">{{dakaResult.prompt}}</view>
              <!-- <view class="xb_time">18:00之后可打下班卡</view> -->
              <view class="dk_info">
                 <view v-if="dakaResult.status=='ABNORMAL'">时间：<text style="color:#ff0000">{{dakaResult.clockTime}}</text></view>
                 <view v-else>时间：<text style="color:#11BF71">{{dakaResult.clockTime}}</text></view>
                 <view style="margin-top: 30rpx;">地点：<text style="color: #333;">{{dakaResult.isRangeTips}}</text></view>
              </view>
			  
			  <view class="time">上班{{companyInfo.upTime}}——下班{{companyInfo.downTime}}<van-icon name="arrow" /></view>
           </view>
        </view>
        
      <view style="height: 100rpx;"></view>
     </view>
</template>
<script setup>
import { onLoad,onUnload } from '@dcloudio/uni-app';
import * as timeDeal from "@/utils/time.js"	
import {OpenTimeClock,dailyTimeclockConfig,dailyTimeClock} from "@/api"
import { USER_INFO_KEY } from "@/enums/cacheEnum"
import locationImg from '@/static/images/location.png'
import avatarL from '@/static/images/avatarL.png'
  const companyInfo=ref('')  //公司配置信息
  const clockStatus=ref(1)  //1可以打卡   2打卡成功  3 失败   0 不在范围内  
  const latitude=ref('')
  const longitude=ref('') 
  const time=ref(timeDeal.formateDate(new Date(),'h:min:s'))  //实时时间
  const clickNum=ref(0)   
  const moduleColor=ref( 'CGreen')
  const moduleTitle=ref( '上班打卡')
  const bzText=ref({time:"",address:"",img:"",remarks:""})
  const type=ref("") 
  const r =ref(80)		//半径 
  const isAm=ref(false)	//上班是否打卡
  const isPm=ref(false)						//下班是否打卡
  const amSign=ref({time:"",address:"",remarks:"",img:""})			//上午打卡信息
  const pmSign=ref({time:"",address:"",remarks:"",img:""})			//下午打卡信息 
  const is=ref(null)								//是否正常打卡（外勤打卡）
  const isSign=ref(false)							//是否打卡 
  const date=ref(timeDeal.formateDate(new Date(),'Y-M-D'))
  const week=ref("")						//当前星期几	 
  const address=ref("我的位置")						//
  const wqInfo=ref(null)
  const allSign=ref([])							//所有打卡信息		
  const timerS=ref(null)
  const am=ref(true)
//   const organize=ref(R &amp D department')						//考情组						
const signInfo=ref({mode:"", latitude:"",longitude:"",address:"",time:"",remarks:""})	//打卡信息 （模式，经纬度，地址，时间）
const covers=ref([])
const circles=ref([])
const dakaResult=ref('')
  const userInfo = ref(cache.get(USER_INFO_KEY))
const key=ref('UOLBZ-MHOWL-3MJPV-MS2QF-VYOGS-MWFSB')
 const clickSign= async()=>{   
	getLocation() //再次获取数据
	uni.showLoading({title:"打卡...",mask:true});
	signInfo.value.clockTime = timeDeal.formateDate(new Date(),'Y-M-D h:min:s');  
	let res=await dailyTimeClock(signInfo.value)
	dakaResult.value=res.data
	uni.hideLoading()
	clockStatus.value=2
}
  onLoad(async()=>{
	  
	 
	const res= await OpenTimeClock()
	const result=await dailyTimeclockConfig({yardId:userInfo.value.yardId})
	companyInfo.value=result.data
	moduleTitle.value = res.data.prompt
	// 公司范围
	let circles1={
		longitude:Number(result.data.lat),
		latitude:Number(result.data.lon), 
		radius:80,
		strokeWidth:1,
		fillColor:"#00aaff99",
	}
	circles.value.push(circles1)
	// 公司点信息
	let cover1={
		longitude:Number(result.data.lat),
		latitude:Number(result.data.lon), 
		id:0,
		iconPath: locationImg,
		width: 24,
		height: 32,
		callout:{
			content:result.data.yardName,
			color:"#333",
			display:"ALWAYS",
		}
	}
	covers.value.push(cover1)
	 getLocation() 
	getTime()
  })
  onUnload(()=>{
	  clearInterval(timerS.value)
  }) 
// 实时时间
function getTime() { 
	timerS.value=setInterval(_=>{
		time.value = timeDeal.formateDate(new Date(),'h:min:s')
	},1000)
}
  function getLocation(){   
    let setTime = companyInfo.value.upTime.replace(/:/g,'')
    let endTime = companyInfo.value.downTime.replace(/:/g,'')
    let getTime = time.value.replace(/:/g,'').substring(0,4)
	let zw=('12:00').replace(/:/g,'')  //中午
	am.value=zw>getTime?true:false
    if(Number(setTime) < Number(getTime)){
        moduleColor.value =  'CRed' 
    }
    if(clickNum.value !== 0){
        uni.showLoading({title:"获取中...",mask:true})
    }
    if(clickNum.value >= 3){
        uni.showToast({title:"请稍后尝试！",icon:"none",mask:true});
        return ;
    }
    clickNum.value++;
    uni.getLocation({
        type: 'wgs84', //返回可以用于uni.openLocation的经纬度
        success:(res)=>{
            console.log(res)
            uni.hideLoading();
            latitude.value = res.latitude;
            longitude.value = res.longitude;  
            covers.value[1] = {id:1,latitude:res.latitude,longitude : res.longitude,iconPath: avatarL,width: 40,height: 47,callout:{
			content:'不在打卡范围内',
			color:'red',
			display:"ALWAYS",
		}}
            var s = timeDeal.pointInsideCircle([latitude.value,longitude.value],[circles.value[0].latitude,circles.value[0].longitude],r.value/100000);
            console.log(covers)
            console.log(s)
            is.value = s;
            signInfo.value.latitude = res.latitude;
            signInfo.value.longitude = res.longitude;
            // signInfo.value.mode = s ? "正常打卡" : "外勤打卡"; 
			signInfo.value.isRange=s?"Y":'N'
            // getAdd()
        }, 
        fail:(err)=>{
            console.log(err)
            uni.hideLoading();
            address.value= "请检查位置信息"
            uni.showToast({title:"请检查位置信息状态！",icon:"none", mask:true,duration:3000})
        }
    }) 
}
function getAdd(){
    if(isAm.value && isPm.value){
        return;
    }
    if(is.value === true){
        let address = covers.value[0].callout.content;
        address.value = address;
        signInfo.value.address = address;
        return;
    }
    var url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude.value},${longitude.value}&key=${key.value}`;
    uni.request({
        url,
        success(res){
            var data = res.data;
            if(data.status != 0){
                uni.showToast({title:data.message,icon:"none"})
                return;
            }
            if(is.value === null){
                address.value = "请检查位置信息！";
            }
            if(is.value === false){
                let address = res.data.result.address + res.data.result.formatted_addresses.recommend
                address.value = address;
                signInfo.value.address = address;
            }
        }
    })
}
function clockHanler(){
    clockStatus.value=2
}
</script>
<style lang="scss" scoped>
.cardBottom{
   width: 100%;
   top: 0;
   background: #fff;
   border-radius: 12rpx 12rpx 0 0;
   position: fixed;
   bottom: 0;
   left: 0;
   box-sizing: border-box;
   .content{
	   height: 100%;
       background: linear-gradient(180deg, rgba(255,160,0,0.16) 0%, rgba(255,255,255,0) 29%, #FFFFFF 97%);
       border-radius: 12rpx 12rpx 0 0;
	   padding-top: 110rpx;
	   box-sizing: border-box;
	   .circle{
		    margin: 0 auto;
			margin-bottom: 110rpx;
			width: 300rpx;
			height: 300rpx;
			opacity: 1;
			border-radius: 50%;
			font-size: 36rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 700;
			color: #3D3D3D;
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			line-height:1.5;
	   	&.CGreent{
	   		
	   		border: 20rpx solid #FFA000;
	   	}
	   	&.CRed{ 
	   		border: 20rpx solid #ff0000;
	   	}
	    .desc{
	        font-size: 28rpx;
	        font-family: Source Han Sans, Source Han Sans;
	        font-weight: 400;
	        color: #B6B6B6;
	        line-height: 36rpx;
	        margin-top: 30rpx;
	    }
	   }
	   .time{
	    font-size: 28rpx;
	    font-family: Source Han Sans, Source Han Sans;
	    font-weight: 400;
	    color: #B6B6B6; 
	    text-align: center;
	    position: absolute;
	    bottom: 130rpx;
	    width: 100%;
	    left: 0;
	   }
   }
}
.dkn{
width: 100%;
   height: calc(100vh - 30rpx);
   background: #fff;
   border-radius: 12rpx 12rpx 0 0;
   position: fixed;
   bottom: 0;
   left: 0;
   box-sizing: border-box; 
   padding-top: 210rpx;
   box-sizing: border-box;
   text-align: center;
   .success_dk{
    width: 148rpx;
    height: 148rpx;
    display: block;
    margin: 0 auto;
   }
   .work_status{
    font-size: 48rpx;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 700;
    color: #3D3D3D;
    text-align: center;
    margin-top: 40rpx;
   }
   .address_icon{
    width: 95rpx;
    height: 95rpx;
    display: block;
    margin: 0 auto;
   }
   .xb_time{
    font-size: 36rpx;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 400;
    color: #B6B6B6;
    margin-top: 20rpx;
   }
   .dk_tj{
        font-size: 48rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        margin-top: 20rpx;
        color: #11BF71; 
        font-size: 36rpx;
;
   }
   .dk_info{
    width: 690rpx; 
    padding: 40rpx 50rpx;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    opacity: 1;
    border: 2rpx solid #E7E7E7;
    box-sizing: border-box;
   
    font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #B6B6B6;
        text-align: left;
font-size: 36rpx;
margin: 0 auto;
        margin-top: 150rpx;
        
   }
   .address{ 
        font-size: 36rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #11BF71;
        margin-top: 20rpx;
   }
   .circle{
    margin: 110rpx auto;
    width: 300rpx;
    height: 300rpx;
    background: #F9FAFB;
    opacity: 1;
    border-radius: 50%;
    font-size: 36rpx;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 700;
    color: #3D3D3D;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    line-height:1.5;
	&.CGreen{
		
		border: 20rpx solid #11BF71;
	}
	&.CRed{
		
		border: 20rpx solid #ff0000;
	}
    .desc{
        font-size: 28rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #B6B6B6;
        line-height: 36rpx;
        margin-top: 30rpx;
    }
   }
   .time{
    font-size: 28rpx;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 400;
    color: #B6B6B6; 
    text-align: center;
    position: absolute;
    bottom: 130rpx;
    width: 100%;
    left: 0;
   }
}
.warning{
	text-align: center;
}
</style>